<template>
  <div id="leaflet">
    <div id="map"></div>
    <div class="box">
      <el-switch
        v-model="StileLayer"
        inactive-text="切换底图"
        active-color="#6cf"
        inactive-color="rgb(0,0,0)"
        @change="CtileLayer"
      >
      </el-switch>

      <el-switch
        v-model="Sgeojson"
        inactive-text="边界(GeoJson)"
        active-color="#6cf"
        inactive-color="rgb(0,0,0)"
        @change="Cgeojson"
      >
      </el-switch>

      <el-switch
        v-model="ScircleMarker"
        inactive-text="圆/点(px)"
        active-color="#6cf"
        inactive-color="rgb(0,0,0)"
        @change="CcircleMarker"
      >
      </el-switch>

      <el-switch
        v-model="Scircle"
        inactive-text="圆/点(m)"
        active-color="#6cf"
        inactive-color="rgb(0,0,0)"
        @change="Ccircle"
      >
      </el-switch>

      <el-switch
        v-model="Spolyline"
        inactive-text="线"
        active-color="#6cf"
        inactive-color="rgb(0,0,0)"
        @change="Cpolyline"
      >
      </el-switch>

      <el-switch
        v-model="Spolygon"
        inactive-text="多边形"
        active-color="#6cf"
        inactive-color="rgb(0,0,0)"
        @change="Cpolygon"
      >
      </el-switch>

      <el-switch
        v-model="Srectangle"
        inactive-text="矩形"
        active-color="#6cf"
        inactive-color="rgb(0,0,0)"
        @change="Crectangle"
      >
      </el-switch>

      <el-switch
        v-model="SimageOverlay"
        inactive-text="图片"
        active-color="#6cf"
        inactive-color="rgb(0,0,0)"
        @change="CimageOverlay"
      >
      </el-switch>

      <el-switch
        v-model="Sicon"
        inactive-text="图标(icon)"
        active-color="#6cf"
        inactive-color="rgb(0,0,0)"
        @change="Cicon"
      >
      </el-switch>

      <el-switch
        v-model="SdivIcon"
        inactive-text="自定义(divIcon)"
        active-color="#6cf"
        inactive-color="rgb(0,0,0)"
        @change="CdivIcon"
      >
      </el-switch>

      <el-switch
        v-model="SvelocityLayer"
        inactive-text="风场"
        active-color="#6cf"
        inactive-color="rgb(0,0,0)"
        @change="CvelocityLayer"
      >
      </el-switch>
    </div>
    <el-card class="box-card">
      <el-button
        v-for="(item, index) in btns"
        :key="index"
        class="btn"
        :style="item == 'leaflet' ? 'display:none' : ''"
        @click="btn(item)"
        >{{ item }}</el-button
      >
    </el-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
import axios from "axios";
import velocityLayerJson from "@/../public/static/velocityLayerJson.json";

export default {
  computed: {
    ...mapState({
      btns: (state) => state.vuex.btns,
    }),
  },
  mounted() {
    this.initmap();
  },
  data() {
    return {
      map: null,
      tileLayerUrl1:
        "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
      tileLayerUrl2:
        "https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
      tileLayer1: null,
      tileLayer2: null,
      StileLayer: false,

      Sgeojson: false,
      china: null,
      jiangsu: null,

      ScircleMarker: false,
      circleMarker: null,

      Scircle: false,
      circle: null,

      Spolyline: false,
      polyline: null,

      Spolygon: false,
      polygon: null,

      Srectangle: false,
      rectangle: null,

      SimageOverlay: false,
      imageOverlay: null,

      Sicon: false,
      icon: null,

      SdivIcon: false,
      divIcon: null,

      SvelocityLayer: false,
      velocityLayer: null,
    };
  },
  methods: {
    initmap() {
      this.map = L.map("map", {
        center: [32, 118.8], // 地图中心
        zoom: 8, //初始地图缩放级别
        // minZoom: ,//最小缩放级别
        // maxZoom: ,//最大缩放级别
        zoomControl: false, //禁用 + - 按钮
        attributionControl: false, // 移除右下角leaflet标识
      });
      this.CtileLayer(this.StileLayer);
    },
    //切换底图
    CtileLayer(val) {
      if (val) {
        this.tileLayer2 = L.tileLayer(this.tileLayerUrl2).addTo(this.map);
        if (this.tileLayer1) {
          this.map.removeLayer(this.tileLayer1);
        }
      } else {
        this.tileLayer1 = L.tileLayer(this.tileLayerUrl1).addTo(this.map);
        if (this.tileLayer2) {
          this.map.removeLayer(this.tileLayer2);
        }
      }
    },
    //GeoJson
    Cgeojson(val) {
      if (val) {
        axios({
          method: "get",
          url: "./static/chinaBoundary.geojson",
        }).then((res) => {
          this.china = L.geoJSON(res.data, {
            style: {
              color: "red",
              fill: false,
              weight: 1,
            },
          }).addTo(this.map);
        });
        axios({
          method: "get",
          url: "./static/jiangsuBoundary.geojson",
        }).then((res) => {
          this.jiangsu = L.geoJSON(res.data, {
            style: {
              color: "#6cf",
              fill: false,
              weight: 1,
            },
          }).addTo(this.map);
        });
      } else {
        if (this.china) {
          this.map.removeLayer(this.china);
          this.china = null;
        }
        if (this.jiangsu) {
          this.map.removeLayer(this.jiangsu);
          this.jiangsu = null;
        }
      }
    },
    //圆/点(px)
    CcircleMarker(val) {
      if (val) {
        this.circleMarker = L.circleMarker([32, 118.8], {
          radius: 8,
          color: "#6cf",
          fillColor: "#000",
          fillOpacity: 1,
        }).addTo(this.map);
      } else {
        if (this.circleMarker) {
          this.map.removeLayer(this.circleMarker);
          this.circleMarker = null;
        }
      }
    },
    //圆/点(m)
    Ccircle(val) {
      if (val) {
        this.circle = L.circle([32, 118.8], {
          radius: 888,
          color: "#6cf",
          fillColor: "#000",
          fillOpacity: 1,
        }).addTo(this.map);
      } else {
        if (this.circle) {
          this.map.removeLayer(this.circle);
          this.circle = null;
        }
      }
    },
    //线
    Cpolyline(val) {
      if (val) {
        let latlngs = [
          [
            [30, 100],
            [32, 118.8],
            [40, 120],
          ],
          [
            [20, 90],
            [30, 110],
            [40, 150],
          ],
        ];
        this.polyline = L.polyline(latlngs, { color: "#6cf" }).addTo(this.map);
      } else {
        if (this.polyline) {
          this.map.removeLayer(this.polyline);
          this.polyline = null;
        }
      }
    },
    //多边形
    Cpolygon(val) {
      if (val) {
        let latlngs = [
          [30, 120],
          [40, 130],
          [40, 110],
          [30, 100],
        ];
        this.polygon = L.polygon(latlngs, { color: "#6cf" }).addTo(this.map);
      } else {
        if (this.polygon) {
          this.map.removeLayer(this.polygon);
          this.polygon = null;
        }
      }
    },
    //矩形
    Crectangle(val) {
      if (val) {
        let bounds = [
          [30, 110],
          [40, 120],
        ];
        this.rectangle = L.rectangle(bounds, { color: "#6cf" }).addTo(this.map);
      } else {
        if (this.rectangle) {
          this.map.removeLayer(this.rectangle);
          this.rectangle = null;
        }
      }
    },
    //图片
    CimageOverlay(val) {
      if (val) {
        let imageUrl = require("@/assets/logo.png");
        let bounds = [
          [31.2, 118],
          [32.4, 119.4],
        ];
        this.imageOverlay = L.imageOverlay(imageUrl, bounds, {
          opacity: 1,
        }).addTo(this.map);
      } else {
        if (this.imageOverlay) {
          this.map.removeLayer(this.imageOverlay);
          this.imageOverlay = null;
        }
      }
    },
    //图标(icon)
    Cicon(val) {
      if (val) {
        let icon = L.icon({
          iconUrl: require("@/assets/logo.png"),
          iconSize: [30, 30],
        });
        this.icon = L.marker([32, 118.8], { icon }).addTo(this.map);
      } else {
        if (this.icon) {
          this.map.removeLayer(this.icon);
          this.icon = null;
        }
      }
    },
    //自定义(divIcon)
    CdivIcon(val) {
      if (val) {
        let icon = L.divIcon({
          html: "<div>" + "鸡你太美" + "</div>",
          className: "divIcon",
        });
        this.divIcon = L.marker([32, 118.8], { icon }).addTo(this.map);
      } else {
        if (this.divIcon) {
          this.map.removeLayer(this.divIcon);
          this.divIcon = null;
        }
      }
    },
    //风场
    CvelocityLayer(val) {
      if (val) {
        this.StartVelocityLayer();
        this.map.on("movestart", this.EndVelocityLayer);
        this.map.on("moveend", this.StartVelocityLayer);
      } else {
        this.EndVelocityLayer();
        this.map.off("movestart", this.EndVelocityLayer);
        this.map.off("moveend", this.StartVelocityLayer);
      }
    },
    StartVelocityLayer() {
      let data = velocityLayerJson;
      this.velocityLayer = L.velocityLayer({
        displayValues: true,
        data, //风场数据
        minVelocity: 0, //最小速率
        maxVelocity: 14, //最大速率
        velocityScale: 0.005,
        particleMultiplier: 1 / 100, //粒子的数量
        lineWidth: 1, //粒子的粗细
        frameRate: 15, //定义每秒执行的次数
      });
      this.map.addLayer(this.velocityLayer);
    },
    EndVelocityLayer() {
      if (this.velocityLayer) {
        this.map.removeLayer(this.velocityLayer);
        this.velocityLayer = null;
      }
    },

    btn(val) {
      this.$router.push(`/${val}`);
    },
  },
};
</script>

<style lang="scss" scoped>
#leaflet {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  #map {
    width: 100%;
    height: 100%;

    :deep(.divIcon) {
      div {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        font-size: 50px;
        line-height: 50px;
        color: #6cf;
      }
    }
  }

  .box {
    position: absolute;
    left: 0;
    top: 0;
    width: 160px;
    padding: 0 10px;
    background-color: rgba($color: #000000, $alpha: 0.6);
    z-index: 1000;

    :deep(.el-switch) {
      display: block;
      margin: 5px 0;
    }
    :deep(.el-switch__label),
    :deep(.is-active) {
      color: #fff !important;
    }
  }

  .box-card {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 140px;
    height: 440px;
    background-color: rgba($color: #000000, $alpha: 0.6);
    z-index: 1000;
    :deep(.el-card__body) {
      text-align: center;
    }
    .btn {
      width: 100px;
      margin: 0 0 5px;
      background-color: transparent;
      color: #fff;
      &:hover {
        background-color: rgba($color: #000, $alpha: 0.6);
      }
    }
  }
}
</style>